import React, {useEffect, useState} from "react";
import {
    Button,
    Col,
    Form,
    Input,
    message,
    Modal, Popconfirm,
    Row,
    Select,
    Space,
    Switch,
    Table,
    TableProps, Tag,
    Tooltip,
    Tree
} from 'antd';
 import {DeleteOutlined, FormOutlined, PlusOutlined, QuestionCircleOutlined} from "@ant-design/icons";
import {handleTree, setKey} from "@/utils/Z.ts";
import {delMenu, listMenu} from "@/api/system/menu.ts";
import EditorMenuView from "@/views/system/menu/component/EditorMenuView.tsx";
import useResponsiveLayout from "@/utils/useResponsiveLayout";
import { globalMessage } from "@/utils/message";

const MenuView: React.FC = () => {

    interface DataType {
    }
    const [form] = Form.useForm();
    const [record, setRecord] = useState<Record<string, any>>({});
    const [dataList, setDataList] = useState<DataType[]>([]);
    const columns: TableProps<DataType>['columns'] = [
        {
            title: '菜单名称',
            dataIndex: 'menuName',
            key: 'menuName',
            width: 200
        },
        {
            title: '图标',
            dataIndex: 'icon',
            key: 'icon',
            align: 'center'
        },
        {
            title: '排序',
            dataIndex: 'orderNum',
            key: 'orderNum',
            align: 'center',
        }, {
            title: '权限标识',
            dataIndex: 'perms',
            key: 'perms',
            align: 'center',
        }, {
            title: '组件路径',
            dataIndex: 'component',
            key: 'component',
            align: 'center',
        },  {
            title: '路由路径',
            dataIndex: 'path',
            key: 'path',
            align: 'center',
        }, {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            render: (_, record:any) => (
                <div><Tag color="processing">{record.status === "0" ? "正常" : "停用"}</Tag></div>
            )
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',
        }, {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align: 'center',

        }, {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'center',
            render: (_, record:any) => (
                <Space size="middle">
                    <Button type="link" size="small" icon={<FormOutlined/>}
                            onClick={() => EditClick(record)}>修改</Button>
                    <Button type="link" size="small" icon={<PlusOutlined/>}
                            onClick={() => handleAddClick(record)}>新增</Button>
                    <Popconfirm
                        title="删除"
                        okText="确认"
                        cancelText="取消"
                        description={'确认删除名称为"' + record.menuName + '"的数据？'}
                        onConfirm={() => handleDelete(record)}
                        icon={<QuestionCircleOutlined/>}>
                        <Button type="link" size="small" icon={<DeleteOutlined/>}
                        >删除
                        </Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    const [queryParams, setQueryParams] = useState({});
    const [title, setTitle] = useState('');
    const [open, setOpen] = useState<boolean>(false);
    useEffect(() => {
        getList();
    }, [queryParams]);  // 监听 queryParams 变化，调用 getList

    /** 查询用户列表 */
    function getList() {
        listMenu(queryParams).then((res:any) => {
            if (res?.code === 200) {
                setDataList(handleTree(setKey(res.data, "menuId"), "menuId"))
            }
        })
    }

    // 查询列表
    function handleSearch() {
        form.validateFields().then(values => {
            setQueryParams(values);
        });
    }
    // 重置查询
    const resetSearch = () => {
        form.resetFields();
        setQueryParams({}); // 重置为初始状态
    }
const handleAddClick = (e?: Record<string, any>) => {
        let data={}
       if(e){
            data = {
               // 新增的时候是本级就是上级，新增的是下级
               parentId: e.menuId,
               menuType: "M"
           }
       }else{
            data = {}
       }
    setRecord(data)
    setTitle("新增菜单")
    setOpen(true)
}

    // 修改按钮
    const EditClick = (e: Record<string, any>) => {
        setRecord(e)
        setTitle("修改菜单")
        setOpen(true)
    }
    // 删除按钮
    const handleDelete = (e: Record<string, any>) => {
        delMenu(e.menuId).then((res:any) => {
            if (res.code === 200) {

                 globalMessage().warning("删除成功").then(r => {})
            } else {
                 globalMessage().warning(res.msg).then(r => {})
            }
            getList()
        })

    }



    return (
        <div className='home'>
            <Row gutter={20} style={{paddingTop: "20px"}}>
                <Col span={24}>
                    <div>
                        <Form
                            form={form}
                            name="customized_form_controls"
                            style={{marginTop: 10, marginLeft: 10, marginBottom: 10}}
                           layout={useResponsiveLayout("inline")}>
                            <Form.Item
                                name="menuName"
                                label="菜单名称">
                                <Input/>
                            </Form.Item>
                            <Form.Item
                                name="status"
                                label="状态">
                                <Select
                                    style={{
                                        width: 120,
                                    }}

                                    allowClear
                                    options={[
                                        {
                                            value: 0,
                                            label: '正常',
                                        }, {
                                            value: 1,
                                            label: '停用',
                                        },
                                    ]}
                                />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit" onClick={handleSearch} style={{
                                    marginRight: 20,
                                }}>
                                    查询
                                </Button>
                                <Button type="primary" htmlType="reset" onClick={resetSearch}>
                                    重置
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div><Button type="primary" ghost onClick={() => {
                        handleAddClick()
                    }} style={{margin: 10}}>
                        新增
                    </Button></div>
                    <Table scroll={{x:true}} columns={columns} dataSource={dataList} pagination={false}/>
                </Col>
            </Row>
            {open && <EditorMenuView title={title} open={open} record={record}  OnCanCle={() => {
                setOpen(false);
                getList();
            }}/>}


        </div>
    )
};
export default MenuView;
